<template>
  <div class="login fullscreen-background">
    <div class="cententBox">
      <div class="left">左侧</div>
      <div class="right">
        <el-tabs
          v-model="activeName"
          class="tabs"
          @tab-click="handleClick"
          type="border-card"
        >
          <el-tab-pane label="讲者" name="first">
            <el-form
              ref="speakerLoginFormRef"
              label-width="auto"
              :rules="speakerRules"
              :model="speakerLoginForm"
            >
              <el-form-item prop="name">
                <el-input
                  v-model="speakerLoginForm.name"
                  placeholder="请输入参会名称"
                />
              </el-form-item>
              <el-form-item prop="number">
                <el-input
                  v-model="speakerLoginForm.number"
                  placeholder="请输入手机号码"
                />
              </el-form-item>
            </el-form>
            <el-button
              type="primary"
              size="large"
              class="loginBtn"
              @click="clickSpeakerSubmit('speakerLoginForm')"
              >登录</el-button
            >
          </el-tab-pane>
          <el-tab-pane label="访客" name="second">
            <el-form
              ref="visitorLoginFormRef"
              label-width="auto"
              :rules="visitorRules"
              :model="visitorLoginForm"
            >
              <el-form-item prop="number">
                <el-input
                  v-model="visitorLoginForm.number"
                  placeholder="请输入您的用户名或手机号码"
                />
              </el-form-item>
              <el-form-item prop="password" v-if="isPassWordLogin">
                <el-input
                  v-model="visitorLoginForm.password"
                  placeholder="请输入密码"
                />
              </el-form-item>

               <el-form-item prop="code" v-if="!isPassWordLogin">
                <el-input
                  v-model="visitorLoginForm.code"
                  placeholder="请输入图形验证码"
                  class="codeInput"
                ></el-input>
                <el-button @click="changeImg" type="text">换一张</el-button>
                <el-image style="width: 50px; height: 50px" :src="codeImg" :fit="fit" />
              </el-form-item>

              <el-form-item prop="code" v-if="!isPassWordLogin">
                <el-input
                  v-model="visitorLoginForm.code"
                  placeholder="请输入验证码"
                  class="codeInput"
                ></el-input>
                <el-button @click="sendVerificationCode">发送验证码</el-button>
              </el-form-item>
            </el-form>

            <div class="btnbox">
              <el-button type="text">快速注册</el-button>
              <el-button type="text" @click="isPassWordLogin = !isPassWordLogin">短信验证登录</el-button>
            </div>
            <el-button
              type="primary"
              size="large"
              class="loginBtn"
              @click="clickVisitorSubmit('visitorLoginForm')"
              >登录</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
// 切页
const activeName = ref("first");

// 讲者登录
const speakerLoginForm = reactive({
  name: "",
  number: "",
});
// 讲者登录校验
const speakerRules = {
  name: [{ required: true, message: "请输入参会名称", trigger: "blur" }],
  number: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
};
const speakerLoginFormRef = ref(null);
const clickSpeakerSubmit = (formName) => {
  speakerLoginFormRef.value.validate((valid) => {
    if (valid) {
      speakerLogin();
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
const speakerLogin = async () => {
  try {
    // 模拟接口网络延迟（此处调用接口）
    await new Promise((resolve) => setTimeout(resolve, 1000));
    alert("登陆成功");
    console.log(speakerLoginForm);
  } catch (error) {}
};

// 访客登录
const visitorLoginForm = reactive({
  password: "",
  number: "",
  code: "",
});

const isPassWordLogin = ref(true);
// 访客登录校验
const visitorRules = {
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  number: [
    { required: true, message: "请输入您的用户名或手机号码", trigger: "blur" },
  ],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};
const visitorLoginFormRef = ref(null);
const clickVisitorSubmit = (formName) => {
  visitorLoginFormRef.value.validate((valid) => {
    if (valid) {
      visitorLogin();
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
const visitorLogin = async () => {
  try {
    // 模拟接口网络延迟（此处调用接口）
    await new Promise((resolve) => setTimeout(resolve, 1000));
    alert("登陆成功");
    console.log(speakerLoginForm);
  } catch (error) {}
};
const sendVerificationCode = async () => {
  try {
    // 模拟接口网络延迟（此处调用接口）
    await new Promise((resolve) => setTimeout(resolve, 1000));
    alert("发送验证码");
    console.log(speakerLoginForm);
  } catch (error) {}
};
// 图片验证码
const codeImg = ref('');
const changeImg = async () => {
  try {
    // 模拟接口网络延迟（此处调用接口）
    await new Promise((resolve) => setTimeout(resolve, 1000));
    alert("换一张");
    console.log(speakerLoginForm);
  } catch (error) {}
};
</script>
<style lang="less" scoped>
.fullscreen-background {
  background-image: url("@/img/fullscreen-background.jpg"); /* 替换为你的图片URL */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  --el-font-size-base: var(--el-font-size-base, 16px);
  --el-component-size: var(--el-component-size, 10vw);

  .cententBox {
    width: 80%;
    display: flex;
    background-color: #fff;
    .left {
      width: 50%;
      background: #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right {
      padding: 5vw;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 50%;
      .tabs {
        width: 100%;
        text-align: center;
        .codeInput{
          flex: 1;
          margin-right: 5px;
        }
        .btnbox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
        }
        .loginBtn {
          width: 100%;
        }

        /deep/.el-tabs__content {
          padding: 50px 20px;
          min-height: 200px;
        }
      }
    }
  }
}
</style>
